<template>
  <div>
    <!-- 绘制航路 -->
    <vc-drawings
      ref="drawings"
      position="bottom-right"
      :offset="[10, 80]"
      :editable="true"
      :clamp-to-ground="true"
      @draw-evt="handleDrawingDraw"
      @active-evt="handleDrawingActive"
      @editor-evt="handleDrawingEditor"
      @mouse-evt="handleDrawingMouse"
    >
      <template #body="drawingActionInstances"></template>
    </vc-drawings>

    <!-- 填写航路信息 -->
    <el-drawer
      v-model="drawerVisible"
      title="航路信息"
      @closed="handleClose"
      :size="500"
      class="airroute-draw"
    >
      <el-form :model="form" label-width="auto">
        <el-form-item label="起飞点名称">
          <el-input v-model="form.startName" />
        </el-form-item>
        <el-form-item label="降落点名称">
          <el-input v-model="form.endName" />
        </el-form-item>
        <el-form-item label="航线高度">
          <el-input-number v-model="form.lineHeight" />
        </el-form-item>
        <el-form-item label="左右航线偏置">
          <el-input-number v-model="form.leftRightBias" />
        </el-form-item>
        <el-form-item label="上下航线偏置">
          <el-input-number v-model="form.upDownBias" />
        </el-form-item>
        <el-form-item label="起降航线半径">
          <el-input-number v-model="form.corridorRadius" />
        </el-form-item>
        <el-form-item label="终端区半径">
          <el-input-number v-model="form.terminalRadius" />
        </el-form-item>
        <el-form-item label="终端区顶高">
          <el-input-number v-model="form.terminalUp" />
        </el-form-item>
        <el-form-item label="终端区底高">
          <el-input-number v-model="form.terminalDown" />
        </el-form-item>
        <el-form-item label="机型">
          <el-input v-model="form.airplaneType" />
        </el-form-item>
        <el-form-item label="运输类型">
          <el-input v-model="form.transportType" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { VcDrawings } from "vue-cesium";
import { ElMessage } from "element-plus";
import api from "@/api";

const drawings = ref(null);
const drawerVisible = ref(false);
const form = reactive({
  startName: "",
  startPoint: "",
  endName: "",
  endPoint: "",
  points: "",
  lineHeight: 0,
  leftRightBias: 0,
  upDownBias: 0,
  corridorRadius: 0,
  terminalRadius: 0,
  terminalUp: 0,
  terminalDown: 0,
  airplaneType: "",
  transportType: "",
  remark: "",
});
let [cursor, drawing] = [null, null];

const handleClose = () => {
  drawerVisible.value = false;
  drawings.value.clearAll();
};

const handleConfirm = async () => {
  const result = await api.addAirRoute(form);
  if (result.code === 200) {
    ElMessage.success({
      message: result.msg || "新增成功",
      onClose: () => {
        drawerVisible.value = false;
        drawings.value.clearAll();
      },
    });
  } else {
    ElMessage.error({
      message: result.msg || "服务器忙，请稍后重试！",
      onClose: () => {
        drawings.value.clearAll();
      },
    });
  }
};

const handleDrawingDraw = (e, viewer) => {
  const restoreCursor = getComputedStyle(viewer.canvas).cursor;
  if (e.finished) {
    if (e.type === "move") {
      viewer.canvas.setAttribute("style", `cursor: ${cursor}`);
    }
    drawing = false;
    const positions = e.positionsDegreesArray;
    const [startPoint, points, endPoint] = [
      positions[0],
      positions.slice(1, -1),
      positions[positions.length - 1],
    ];
    form.startPoint = JSON.stringify({
      longitude: startPoint[0],
      latitude: startPoint[1],
      altitude: startPoint[2],
    });
    form.endPoint = JSON.stringify({
      longitude: endPoint[0],
      latitude: endPoint[1],
      altitude: endPoint[2],
    });
    form.points = JSON.stringify(
      points.map((point) => ({
        longitude: point[0],
        latitude: point[1],
      }))
    );
    drawerVisible.value = true;
  } else {
    drawing = true;
    if (e.type === "move") {
      viewer.canvas.setAttribute("style", "cursor: move");
    }
    if (e.type === "new") {
      viewer.canvas.setAttribute("style", "cursor: crosshair");
    }
  }
};

const handleDrawingActive = (e, viewer) => {
  viewer.canvas.setAttribute(
    "style",
    `cursor: ${e.isActive ? "crosshair" : "auto"}`
  );
  if (!e.isActive) {
    drawing = false;
    cursor = "auto";
  }
};

const handleDrawingEditor = (e, viewer) => {
  if (e.type === "move") {
    viewer.canvas.setAttribute("style", "cursor: move");
    drawing = true;
  } else {
    viewer.canvas.setAttribute("style", "cursor: auto");
  }
};

const handleDrawingMouse = (e, viewer) => {
  const restoreCursor = getComputedStyle(viewer.canvas).cursor;
  if (!drawing) {
    if (e.type === "onmouseover") {
      cursor = restoreCursor;
      viewer.canvas.setAttribute("style", "cursor: pointer");
    } else {
      viewer.canvas.setAttribute("style", `cursor: ${cursor || "auto"}`);
    }
  }
};

// 画航路
const handleDrawingRoute = () => {
  drawings.value.toggleAction("polyline");
};

// 暴露添加航路操作
defineExpose({
  handleDrawingRoute,
});
</script>

<style scoped></style>
